<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:fn="http://java.sun.com/jsp/jstl/functions"
	xmlns:p="http://primefaces.org/ui">
	<script type="text/javascript">
		function hide() {
			setTimeout(hideNotify, 3000)

		}
		function hideNotify() {
			document.getElementById('notificationForm:close').click();
		}
	</script>
	<h:form id="notificationForm">
		<p:notificationBar position="top" effect="fade" widgetVar="bar"
			effectSpeed="slow" id="notification" styleClass="notify"
			style="height:100px;">
			<f:facet name="close">
				<h:graphicImage value="/images/closebar.png" />
			</f:facet>
			<div style="height: 25px;" />
			<h:outputText
				value="Successfully Added #{itemsManagedBean.selectedItem.name} #{itemsManagedBean.selectedItem.size} to cart"
				style="color:#FFCC00;font-size:36px;" />
			<div style="width: 15px;" />
			<p:commandLink oncomplete="bar.hide();" update="notification"
				id="close" title="Close">
				<h:graphicImage value="/images/closebar.png" />
			</p:commandLink>

		</p:notificationBar>
	</h:form>
	<h:form id="itemList">

		<p:dataGrid var="item" value="#{itemsManagedBean.filteredList}"
			columns="5" id="itemGrid">

			<p:panel 
				style="text-align:center;width:200px;" id="itemPanel">
				<h:panelGrid columns="1">


					<h:graphicImage value="#{item.itemImagePath}" id="image"
						height="125" />
					<h:outputText value="#{item.brand} #{item.name}" />
					<!-- <h:panelGrid styleClass="moreSizes" columns="2">
						<p:commandLink oncomplete="sizesDialog.show()" value="More Sizes"
							title="View Detail" update=":itemList:sizeDetail">
							<h:outputText styleClass="ui-icon ui-icon-search"
								style="margin:0 auto;" />

							<f:setPropertyActionListener value="#{item}"
								target="#{itemsManagedBean.selectedItem}" />
						</p:commandLink>
					</h:panelGrid> -->
					<h:panelGrid columns="2">
						<h:selectOneMenu value="#{item.moreSizeItemId}"
							rendered="${fn:length(item.sizesList) gt 1}"
							style="width:142px;margin-left:-10px;">
							<f:selectItems value="#{item.sizesList}" />
							<p:ajax event="change" update="itemPanel"
								listener="#{itemsManagedBean.sizeChangeListener}" />
							<f:param name="itemId" value="#{item.itemId}"></f:param>
						</h:selectOneMenu>
						<h:panelGrid columns="3" style="text-align:centre;"
							rendered="${fn:length(item.sizesList) le 1}">
							<h:outputText value="#{item.size}" />
							<h:graphicImage value="/images/rupee_symbol.png"></h:graphicImage>
							<h:outputText value="#{item.srp}" />
						</h:panelGrid>
						<h:outputText value="#{item.price}"
							rendered="#{item.offer ne 0.00 }"
							style="text-decoration: line-through;" />
					</h:panelGrid>
					<h:panelGrid columns="2">
						<h:panelGrid columns="2" style="margin-right:40px;">
							<h:outputText value="Qty:" />
							<p:spinner min="1" maxlength="2" value="#{item.qty}" size="1"></p:spinner>
						</h:panelGrid>
						<p:commandButton title="Add to Cart" icon="cart-basket"
							oncomplete="bar.show(); hide();"
							update=":cartForm :notificationForm:notification"
							action="#{itemsManagedBean.addToCart}"
							styleClass="ui-button cart-button">
							<f:setPropertyActionListener value="#{item}"
								target="#{itemsManagedBean.selectedItem}" />
						</p:commandButton>
					</h:panelGrid>
				</h:panelGrid>
			</p:panel>

		</p:dataGrid>
		<p:dialog header="More Sizes" widgetVar="sizesDialog">
			<p:dataGrid var="sizes"
				value="#{itemsManagedBean.selectedItem.moreSizesList}" columns="3"
				id="sizeDetail">

				<h:outputText value="#{sizes.sizeName}" />

				<h:outputText value="Rs :#{sizes.price}" />
				<p:commandLink style="float:right;margin-right:30px;"
					action="#{itemsManagedBean.addSelectedSize}"
					update=":cartForm :notificationForm:notification"
					oncomplete="sizesDialog.hide();bar.show(); hide();">
					<h:graphicImage value="/images/add.png" />
					<f:setPropertyActionListener value="#{sizes}"
						target="#{itemsManagedBean.selectedMoreSizeItem}" />
				</p:commandLink>

			</p:dataGrid>
		</p:dialog>

		<p:messages></p:messages>


	</h:form>
</ui:composition>